<template>
  <div class="header">
    <div class="user-icon" @click="showUserList">
      <van-icon name="wap-nav" size="25"/>
    </div>

    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        background="rgba(225, 225, 225,0.4)"
        :placeholder="placeholderTxt"
        @click="searchClick"
      />
      <!-- <input type="text" placeholder="11111111"/>
      <div class="search-icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangdajing"></use>
        </svg>
      </div> -->
    </div>

    <div class="right-icon">
       <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tinggeshiqu40x40"></use>
      </svg>
    </div>


    <van-popup class="van-popup" v-model="show" position="left" :style="{ height: '100%', width: '70%' }">
      <div class="userInfo">
        <div class="left">
          <img :src="imageUrl">
          <span>{{ userName }}</span>
          <van-icon name="arrow" />
        </div>
        <div class="right">
          <van-icon name="scan" size="25"/>
        </div>
      </div>

      <div class="user-list">
        <div class="user-list-menu info-menu">
          <div class="info-menu1">
            <div class="left">
              <svg t="1638256637097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6640" width="200" height="200"><path d="M874.666667 375.189333V746.666667a64 64 0 0 1-64 64H213.333333a64 64 0 0 1-64-64V375.189333l64 54.250667V746.666667h597.333334V429.44l64-54.250667zM810.666667 213.333333a64.789333 64.789333 0 0 1 22.826666 4.181334 63.616 63.616 0 0 1 26.794667 19.413333 64.32 64.32 0 0 1 9.344 15.466667c2.773333 6.570667 4.48 13.696 4.906667 21.184L874.666667 277.333333v21.333334L553.536 572.586667a64 64 0 0 1-79.893333 2.538666l-3.178667-2.56L149.333333 298.666667v-21.333334a63.786667 63.786667 0 0 1 35.136-57.130666A63.872 63.872 0 0 1 213.333333 213.333333h597.333334z m-9.6 64h-578.133334L512 523.882667 801.066667 277.333333z" p-id="6641"></path></svg>
              <span>我的消息</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu2">
            <div class="left">
              <svg t="1638256978116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6773" width="200" height="200"><path d="M857.38719 501.122873l32.092376 55.372292-462.704913 268.054249-32.092376-55.372292 462.704913-268.054249zM214.687739 272.628103a74.666667 74.666667 0 0 1 56.108377-10.59344l349.700121 72.962378 25.42413-16.550783a256 256 0 0 1 200.607216-34.234109l7.340895 1.920136 33.304979 9.173915a62.784 62.784 0 0 1 17.808365 112.93566l-3.142878 1.93771-565.500618 326.294865a64 64 0 0 1-62.81291 0.644848l-3.608286-2.153736-116.500307-74.381783a51.178667 51.178667 0 0 1-5.80794-81.95298l2.726317-2.189881 40.021527-29.880682a64 64 0 0 1 38.67169-12.720002l4.636771 0.180458L306.447943 539.764106l63.58375-41.464382-183.853702-86.16662a66.282667 66.282667 0 0 1-33.502513-84.438721l1.602898-3.709032a66.282667 66.282667 0 0 1 23.743377-27.355265zM228.654476 597.832534l-25.165422 18.790878 100.878414 64.433205 562.921897-324.830673-30.46755-8.398012a192 192 0 0 0-155.943322 24.212909L323.148023 605.254826l-94.493547-7.422292zM249.719766 326.18002l-36.695129 23.994174a2.282667 2.282667 0 0 0 0.277033 3.978501l219.777991 102.991981 111.431983-72.636812-286.786137-59.821493a10.666667 10.666667 0 0 0-6.543342 0.698599L249.719766 326.18002z" p-id="6774"></path></svg>
              <span>云贝中心</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu3">
            <div class="left">
            <svg t="1638258116949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6914" width="200" height="200"><path d="M448.533333 155.797333c67.968 53.098667 115.498667 104.618667 142.592 154.602667 25.664 47.36 35.968 95.808 30.912 145.344l-0.981333 8.256 5.034667-4.117333a143.829333 143.829333 0 0 0 40.533333-57.536l2.218667-6.122667 6.336-19.029333c67.776 46.037333 101.674667 124.010667 101.674666 233.898666 0 164.821333-144.426667 270.037333-263.125333 270.037334-118.72 0-253.866667-70.506667-275.733333-218.069334-21.845333-147.541333 68.757333-216.426667 130.474666-312.533333 41.173333-64.064 67.84-128.981333 80.064-194.730667z m27.754667 127.744a672.576 672.576 0 0 1-53.973333 101.568l-6.826667 10.453334c-6.933333 10.346667-14.293333 20.629333-23.744 33.365333l-33.749333 45.013333c-52.416 71.786667-66.666667 112.405333-56.682667 179.754667 14.72 99.562667 105.706667 163.434667 212.416 163.434667 99.562667 0 199.125333-91.669333 199.125333-206.037334 0-51.221333-8.106667-92.010667-23.978666-123.712-6.784 7.765333-14.186667 15.104-22.208 21.973334l-131.029334 107.456 21.994667-161.450667c5.269333-38.656-2.048-76.202667-22.762667-114.453333-10.88-20.074667-26.346667-41.109333-46.442666-62.933334l-6.869334-7.296-5.269333 12.864z" p-id="6915"></path></svg>
              <span>创作者中心</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>

        <div class="user-list-menu info-menu">
          <div class="title" style="padding-left:10px;font-size:12px;color:#ccc;border-bottom:1px solid #ccc">
            <span>音乐服务</span>
          </div>
          <div class="info-menu4">
            <div class="left">
              <svg t="1638258367378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2699" width="200" height="200"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 64c-200.298667 0-362.666667 162.368-362.666667 362.666667s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667-162.368-362.666667-362.666667-362.666667zM384.853333 338.08a32 32 0 0 1 45.066667 4.096L512 440.682667l82.08-98.506667a32 32 0 1 1 49.173333 40.981333L571.413333 469.333333H618.666667a32 32 0 0 1 31.946666 30.122667L650.666667 501.333333a32 32 0 0 1-32 32h-69.333334v42.666667H618.666667a32 32 0 0 1 31.946666 30.122667L650.666667 608a32 32 0 0 1-32 32h-69.333334v42.666667a32 32 0 0 1-30.122666 31.946666L517.333333 714.666667a32 32 0 0 1-32-32v-42.666667H405.333333a32 32 0 0 1-31.946666-30.122667L373.333333 608a32 32 0 0 1 32-32h80v-42.666667H405.333333a32 32 0 0 1-31.946666-30.122666L373.333333 501.333333a32 32 0 0 1 32-32h47.232l-71.818666-86.186666a32 32 0 0 1 2.581333-43.722667z" p-id="2700"></path></svg>
              <span>云村有票</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu5">
            <div class="left">
            <svg t="1638258590309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3643" width="200" height="200"><path d="M895.955742 187.552583c-11.351536-3.515057-23.765263-4.945639-35.7052-4.995781-94.78476-0.387833-189.56952-0.214894-284.35735-0.214894-96.326882 0-192.649672 0-288.972461-0.011256-2.495844 0-5.002944-0.065492-7.494695 0.080841-15.774265 0.914836-27.860535 16.096607-25.25315 31.674397 0.354064 2.115174 0.896416 4.093225 1.582031 5.953595 12.873192 47.686069 25.738198 95.374184 38.614459 143.058207 10.510378 38.911218 20.947078 77.836763 31.556717 116.722398 2.877537 10.536984 10.509355 17.935488 19.87363 20.315698l-0.11461 0.556679c1.020236 0.001023 2.040473 0.00307 3.060709 0.005117 2.057869 0.281409 4.173043 0.352017 6.330172 0.144286 0.367367-0.035816 0.724501-0.085958 1.085728-0.13303 47.659463 0.071631 95.318926 0.150426 142.977365 0.217964 40.305985 0.054235 80.605829 0.184195 120.912837 0.135076 14.367219-0.019443 25.670659-9.387811 27.926026-22.623253 3.180436-18.646686-9.934257-32.946366-30.328749-32.972972-81.168648-0.106424-162.336272-0.206708-243.503896-0.312108-18.671245-69.110007-37.34556-138.217968-56.016805-207.327976 179.178869 0.005117 358.357737-0.002047 537.537629 0.045025 5.941316 0 11.882632 0.673335 17.827017 0.934279 3.418866 0.154519 4.941546 1.715061 4.291746 5.15337-1.034563 5.460362-1.723248 11.021008-3.187599 16.361643-25.237801 91.989087-50.693566 183.92087-75.79629 275.948843-6.302543 23.106254-11.582803 46.489824-17.242709 69.77004-3.257184 13.385868-14.666024 21.38403-30.955013 21.38403-145.736199 0.008186-291.476491 0.008186-437.21269 0.004093-1.533936 0-3.080152 0.041956-4.609994-0.065492-14.774495-1.034563-24.945135-10.594289-27.018354-25.217335-0.698918-4.930289-1.24127-9.940396-2.564405-14.71719-35.012422-126.32408-70.116941-252.621555-105.202017-378.923122-10.789741-38.83447-21.506826-77.68429-32.397874-116.492154-3.883447-13.83203-15.947204-22.198581-29.30135-20.810978-18.815531 1.953492-29.059849 18.430768-23.599488 38.081317 41.319058 148.681274 82.683141 297.347199 123.936707 446.047916 4.971222 17.923208 11.024078 35.765575 13.685697 54.066383 6.051833 41.62605 40.171931 73.469292 82.337263 73.52762 148.812257 0.199545 297.627584 0.176009 446.439842 0.011256 39.772842-0.041956 73.358775-28.233018 81.122599-67.205635 1.049912-5.26491 1.292436-10.725272 2.706645-15.873526 27.221991-99.207489 54.689576-198.345394 81.761142-297.593815 5.036713-18.469654 9.940396-37.162388 12.493545-56.07718C936.823522 219.199351 921.546583 195.47809 895.955742 187.552583z" p-id="3644"></path><path d="M369.680621 738.653113c-46.628994-2.63399-85.544305 33.066093-88.044242 80.771605-2.337231 44.62536 33.912367 83.645049 79.945797 86.055958 44.471864 2.322905 84.636632-33.761941 86.759993-77.95342C450.606745 780.410146 415.963737 741.267661 369.680621 738.653113zM365.012298 849.818959c-15.427364-0.046049-27.79402-12.56313-27.64871-27.979238 0.150426-15.407921 12.801561-27.90249 28.02938-27.66713 15.243169 0.23843 27.798113 13.169951 27.506471 28.332279C392.606773 837.571007 380.058992 849.860914 365.012298 849.818959z" p-id="3645"></path><path d="M699.106422 738.559992c-46.221718-0.096191-83.597977 37.235043-83.60207 83.495646 0 45.987381 37.184901 83.36057 83.071997 83.48746 46.124504 0.12689 83.60207-37.307697 83.609233-83.529415C782.193769 776.029372 744.989425 738.656183 699.106422 738.559992zM698.671517 849.818959c-15.130605-0.103354-27.501354-12.428054-27.616988-27.52489-0.119727-15.331173 12.366655-28.02938 27.655873-28.124548 15.262612-0.092098 27.836999 12.504802 27.832905 27.878954C726.539214 837.478909 714.049762 849.922313 698.671517 849.818959z" p-id="3646"></path></svg>
              <span>商城</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu6">
            <div class="left">
              <svg t="1638258644576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="200" height="200"><path d="M812.221666 596.623329c39.231513 0 71.148433-31.917944 71.148433-71.151503 0-39.23049-31.91692-71.14741-71.148433-71.14741-39.23356 0-71.151503 31.91692-71.151503 71.14741C741.069139 564.705386 772.988106 596.623329 812.221666 596.623329zM812.221666 491.163439c18.917862 0 34.30941 15.391549 34.30941 34.308387 0 18.919908-15.391549 34.31248-34.30941 34.31248-18.919908 0-34.31248-15.392572-34.31248-34.31248C777.908162 506.553964 793.300734 491.163439 812.221666 491.163439z" p-id="7982"></path><path d="M664.837944 467.568045c39.231513 0 71.14741-31.917944 71.14741-71.151503 0-39.23049-31.915897-71.14741-71.14741-71.14741s-71.14741 31.91692-71.14741 71.14741C593.690534 435.649078 625.606431 467.568045 664.837944 467.568045zM664.837944 362.107131c18.917862 0 34.308387 15.391549 34.308387 34.308387 0 18.919908-15.390525 34.31248-34.308387 34.31248s-34.308387-15.392572-34.308387-34.31248C630.529557 377.49868 645.920082 362.107131 664.837944 362.107131z" p-id="7983"></path><path d="M981.344504 494.64575l0-95.1685c0-38.181601-6.478552-71.91796-19.254529-100.272751-11.484565-25.486464-28.085662-46.812165-49.343825-63.382563-44.128033-34.399461-96.464005-39.535435-123.733069-39.535435L530.602683 196.286502l0-47.291073c0-10.172687-8.246825-18.419512-18.419512-18.419512s-18.419512 8.246825-18.419512 18.419512l0 47.291073L220.949204 196.286502c-27.269064 0-79.605036 5.136997-123.733069 39.535435-21.25714 16.570397-37.859259 37.896098-49.342802 63.382563-12.777001 28.354791-19.254529 62.09115-19.254529 100.272751l0 95.158267-0.01535 27.733645 0 151.796218c0 65.411779 53.218062 118.628818 118.631888 118.628818l47.955198 0c3.240811 0.156566 17.126053 0.596588 33.735335-2.153036 26.479071-4.379751 46.794769-14.349823 60.382229-29.635971 14.512529-16.32685 22.955828-28.534893 24.713868-31.140231 14.757099-19.72525 36.772508-31.719422 65.444525-35.655058 5.853311-0.803295 11.965519-1.336438 18.674315-1.626034l70.296019 0 0.316202 0.002047 0.37453-0.01535c0.423649-0.008186 42.156122-1.160429 61.145615 22.577205 6.353708 7.942903 17.944697 9.234315 25.889647 2.877537 7.943926-6.354731 9.231245-17.945721 2.877537-25.889647-29.641087-37.052894-84.874039-36.561707-90.896196-36.390815l-70.39528 0-0.76748 0.016373c-8.03193 0.334621-15.400758 0.974188-22.526039 1.952468-39.023782 5.354961-69.39858 22.364357-90.282213 50.554396l-0.567935 0.811482c-0.075725 0.113587-7.688099 11.539824-21.830191 27.450189-16.142655 18.159592-52.369741 20.199041-64.925708 19.462261l-0.587378-0.037862-49.0266 0c-45.101197 0-81.792864-36.68962-81.792864-81.789795L65.442478 522.379395l0.01535-27.733645 0-95.1685c0-61.172221 18.305925-106.458637 54.407144-134.601604 35.43914-27.626197 78.543867-31.751145 101.084233-31.751145l568.062853 0c22.540366 0 65.645093 4.124947 101.084233 31.751145 36.102243 28.142967 54.408167 73.429383 54.408167 134.601604l0 95.178733 0.01535 27.713178 0 151.796218c0 45.099151-36.691667 81.789795-81.792864 81.789795l-48.439222 0-1.174756 0.037862c-11.68718 0.750083-48.713468-1.222851-64.924685-19.462261-14.143115-15.910365-21.75549-27.336602-21.816888-27.429723l-0.581238-0.831948c-20.883633-28.190039-51.259454-45.199435-90.278119-50.553373-5.613858-0.772596-19.290345-1.197268-36.586267-1.673106-4.142343-0.113587-7.53358-0.205685-9.326413-0.280386-10.161431-0.423649-18.74697 7.472182-19.170618 17.635659s7.472182 18.74697 17.635659 19.170618c1.973958 0.081864 5.449106 0.178055 9.849322 0.298805 8.532327 0.234337 28.514427 0.784876 32.586163 1.343601 28.6669 3.934612 50.682309 15.928784 65.440431 35.653011 1.75804 2.604314 10.200316 14.813381 24.714891 31.142278 13.586436 15.284101 33.902134 25.255197 60.381206 29.634948 11.480472 1.899256 21.658276 2.275833 27.919886 2.275833 2.797719 0 4.814656-0.074701 5.815449-0.122797l47.956222 0c65.413825 0 118.631888-53.217039 118.631888-118.628818L981.359854 522.358929 981.344504 494.64575z" p-id="7984"></path><path d="M268.360004 585.593112c0.013303 0 0.025583 0 0.039909 0 10.153244 0 18.396999-8.221242 18.418488-18.380626l0.220011-105.304348 105.065917-0.23843c10.172687-0.022513 18.400069-8.28878 18.377556-18.461467-0.022513-10.159384-8.264221-18.377556-18.418488-18.377556-0.014326 0-0.028653 0-0.042979 0l-104.905258 0.23843 0.220011-105.146758c0.021489-10.172687-8.207939-18.436908-18.380626-18.458397-0.013303 0-0.025583 0-0.039909 0-10.154267 0-18.396999 8.222265-18.418488 18.380626l-0.220011 105.307418-105.065917 0.23843c-10.172687 0.022513-18.400069 8.28878-18.377556 18.461467 0.022513 10.159384 8.264221 18.377556 18.418488 18.377556 0.013303 0 0.028653 0 0.042979 0l104.905258-0.23843-0.220011 105.142665C249.957889 577.307402 258.187317 585.572646 268.360004 585.593112z" p-id="7985"></path></svg>
              <span>游戏专区</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu7">
            <div class="left">
              <svg t="1638258732409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8194" width="200" height="200"><path d="M748.339 248.448c-19.207 36.632 4.669 32.155-31.939 12.949-36.632-19.207-75.983-17.57-56.801-54.202 19.23-36.632 64.479-50.736 101.136-31.53 36.631 19.182 6.81 36.175-12.396 72.783" fill="#FC607B" p-id="8195"></path><path d="M726.701 293.937c-16.511 0-29.917-9.531-44.117-19.616-7.413-5.271-15.067-10.71-23.467-15.115-8.4-4.428-17.306-7.678-25.922-10.807-19.038-6.956-38.727-14.152-46.38-33.96-4.934-12.756-3.272-26.74 5.127-42.746 17.281-32.901 51.073-53.312 88.21-53.312 15.981 0 31.964 3.947 46.188 11.409 23.539 12.323 40.869 33.118 48.787 58.51 7.895 25.392 5.464 52.325-6.884 75.888-10.348 19.736-24.333 29.749-41.542 29.749z m-91.869-97.862c4.092 1.95 10.325 4.212 15.259 6.017 9.676 3.538 20.627 7.534 31.939 13.479 11.313 5.921 20.771 12.636 29.099 18.557 3.995 2.84 8.953 6.378 12.685 8.592 0.24-0.433 0.505-0.915 0.771-1.42 6.232-11.914 7.461-25.513 3.466-38.341-3.996-12.804-12.732-23.274-24.599-29.507-24.141-12.636-55.357-2.696-67.849 21.132-0.29 0.552-0.554 1.034-0.771 1.491z" fill="#213847" p-id="8196"></path><path d="M562.001 806.618l123.688 64.553 8.255-141.764c13.454-25.369-2.72-47.873 6.812-66.02l72.566-118.49c58.462-111.508 53.527-210.574-57.981-269.06-111.532-58.486-249.325-15.5-307.787 96.033l-56.658 108.02c-9.53 18.147-17.04 33.6-25.512 50.014l-162.101 68.691 336.934 175.797" fill="#FC607B" p-id="8197"></path><path d="M718.927 899.618c-3.923 0-7.846-0.938-11.456-2.814l-145.493-76.299c-12.035-6.328-16.704-21.227-10.374-33.285 6.307-12.035 21.18-16.705 33.286-10.373l99.354 52.107-25.104-121.4a24.707 24.707 0 0 1 2.359-16.512 1764.235 1764.235 0 0 1 15.091-27.967c3.658-6.668 6.859-12.541 11.48-21.35l56.657-108.043c25.224-48.089 30.229-103.133 14.057-154.977-16.175-51.867-51.555-94.299-99.645-119.5-94.926-49.797-212.644-17.136-268.193 74.324-7.029 11.673-22.191 15.379-33.841 8.279-11.649-7.052-15.355-22.215-8.279-33.84 69.004-113.627 215.388-154.23 333.203-92.422 59.737 31.313 103.711 84.047 123.809 148.478 20.097 64.407 13.888 132.809-17.45 192.571l-56.656 108.02c-4.79 9.121-8.112 15.211-11.915 22.168a1614.349 1614.349 0 0 0-10.59 19.52l33.84 163.689c1.927 9.314-1.708 18.918-9.314 24.67a24.701 24.701 0 0 1-14.826 4.956zM279.799 669.333a24.79 24.79 0 0 1-11.433-2.816l-161.283-84.602a24.69 24.69 0 0 1-13.165-22.84c0.385-9.531 6.234-17.955 14.995-21.687l153.773-65.153 4.789-9.579c6.113-12.203 20.988-17.065 33.094-10.951 12.178 6.137 17.065 20.939 10.952 33.094l-8.978 17.834a24.574 24.574 0 0 1-12.299 11.457l-114.132 48.354 115.167 60.412c12.034 6.33 16.704 21.229 10.374 33.287-4.404 8.399-12.972 13.19-21.854 13.19z" fill="#213847" p-id="8198"></path><path d="M322.953 433.871a24.77 24.77 0 0 1-11.432-2.816c-12.059-6.33-16.704-21.229-10.374-33.287l18.629-35.477c6.354-12.059 21.205-16.631 33.287-10.374 12.059 6.331 16.703 21.229 10.374 33.287l-18.629 35.477c-4.429 8.4-12.997 13.19-21.855 13.19zM541.326 593.083c-14.297-53.889-65.562-70.664-91.459-71.939-6.619-0.41-13.382 2.142-18.292 6.859a24.613 24.613 0 0 0-7.557 18.002l0.065 6.52a24.668 24.668 0 0 0-1.221 7.586l-0.517 161.928c-16.17-9.247-35.297-14.605-55.78-14.605-57.86 0-104.938 42.721-104.938 95.238s47.078 95.238 104.938 95.238 104.938-42.721 104.938-95.238c0-2.065-0.081-4.114-0.225-6.147 0.08-0.796 0.125-1.604 0.128-2.421l0.53-166.023h46.524a1.55 1.55 0 0 1 0.481 0c13.623 0 24.646-11.023 24.646-24.646 0.002-3.709-0.793-7.223-2.261-10.352zM366.565 848.618c-30.687 0-55.646-20.604-55.646-45.947s24.959-45.947 55.646-45.947c30.688 0 55.646 20.604 55.646 45.947s-24.958 45.947-55.646 45.947z" fill="#213847" p-id="8199"></path></svg>
              <span>口袋彩铃</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>

        </div>

        <div class="user-list-menu info-menu">
          <div class="title" style="padding-left:10px;font-size:12px;color:#ccc;border-bottom:1px solid #ccc">
            <span>其他</span>
          </div>
          <div class="info-menu4">
            <div class="left">
              <svg t="1638258951446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9075" width="200" height="200"><path d="M944.48 552.458667l-182.357333 330.666666a73.792 73.792 0 0 1-64.565334 38.325334h-362.133333a73.792 73.792 0 0 1-64.565333-38.325334l-182.357334-330.666666a75.338667 75.338667 0 0 1 0-72.682667l182.357334-330.666667a73.792 73.792 0 0 1 64.565333-38.325333h362.133333a73.792 73.792 0 0 1 64.565334 38.325333l182.357333 330.666667a75.338667 75.338667 0 0 1 0 72.682667z m-55.989333-31.146667a10.773333 10.773333 0 0 0 0-10.378667l-182.037334-330.666666a10.517333 10.517333 0 0 0-9.205333-5.482667H335.733333a10.517333 10.517333 0 0 0-9.205333 5.482667l-182.037333 330.666666a10.773333 10.773333 0 0 0 0 10.378667l182.037333 330.666667a10.517333 10.517333 0 0 0 9.205333 5.472h361.514667a10.517333 10.517333 0 0 0 9.205333-5.472l182.037334-330.666667zM513.738667 682.666667c-94.261333 0-170.666667-76.405333-170.666667-170.666667s76.405333-170.666667 170.666667-170.666667c94.250667 0 170.666667 76.405333 170.666666 170.666667s-76.416 170.666667-170.666666 170.666667z m0-64c58.912 0 106.666667-47.754667 106.666666-106.666667s-47.754667-106.666667-106.666666-106.666667-106.666667 47.754667-106.666667 106.666667 47.754667 106.666667 106.666667 106.666667z" p-id="9076"></path></svg>
              <span>设置</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu5">
            <div class="left">
              <svg t="1638259032472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10357" width="200" height="200"><path d="M1007.492874 384.513055c-8.795694-34.58307-21.189627-67.666874-36.682043-99.05151-2.698679-5.397358-10.894667-3.498287-10.894666 2.598728v0.299853c0 32.484098-6.896624 63.868734-19.890263 92.554691-10.694764 23.488501-25.487523 45.077933-43.978471 64.068635-41.779547 42.679107-99.05151 66.967217-158.722299 67.26707-61.869712 0.299853-119.941284-24.188159-162.920244-68.966238-40.280281-41.979449-62.56937-98.251902-62.269516-156.323473 0.399804-59.270984 23.588452-114.94373 65.567901-156.823229 19.59041-19.59041 42.179351-35.082826 66.667364-46.077443C672.956643 71.166451 704.041426 64.469729 736.125719 64.469729h1.299364c6.097015 0 8.096037-8.096037 2.598728-10.794715C708.739126 37.982696 675.655322 25.488812 641.172203 16.493216 599.492607 5.598549 555.714038-0.098662 510.536154 0.001289 222.37722 0.700947-7.41029 237.38508 0.185992 525.444064c7.096526 271.667008 225.889418 490.559851 497.456474 497.856279 287.559228 7.796183 524.14341-220.891864 525.842579-508.551044 0.299853-44.977981-5.297407-88.656599-15.992171-130.236244z m-83.15929 301.552378c-22.588942 53.27392-54.873137 101.250434-95.953027 142.330323-41.179841 41.179841-89.056403 73.464036-142.330324 95.953027-55.172991 23.288599-113.744317 35.182777-174.314666 35.182777s-119.141675-11.794226-174.314666-35.182777c-53.27392-22.588942-101.250434-54.873137-142.330323-95.953027-41.179841-41.179841-73.464036-89.056403-95.953027-142.330323C75.749001 630.892442 63.954774 572.221164 63.954774 511.750767s11.794226-119.141675 35.182777-174.314666c22.588942-53.27392 54.873137-101.250434 95.953027-142.330323 41.179841-41.179841 89.056403-73.464036 142.330323-95.953027C392.593892 75.7642 451.26517 63.969974 511.735567 63.969974c13.99315 0 27.886348 0.599706 41.679596 1.89907C489.246577 118.643209 448.266638 198.704016 448.266638 288.360126c0 159.022152 128.836929 287.859081 287.859081 287.859081 89.156354 0 168.817357-40.580134 221.691473-104.149015 1.099462 13.09359 1.699168 26.387082 1.699168 39.680575 0 60.470397-11.794226 119.141675-35.182776 174.314666z" p-id="10358"></path></svg>
              <span>夜间模式</span>
            </div>
            <div class="right">
            <van-switch v-model="checked" size="20px"/>
            </div>
          </div>
          <div class="info-menu6">
            <div class="left">
              <svg t="1638259265730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11398" width="200" height="200"><path d="M640 0a42.666667 42.666667 0 0 1 0 85.333333h-85.333333l0.042666 66.133334C770.304 172.842667 938.666667 354.730667 938.666667 576c0 235.648-191.018667 426.666667-426.666667 426.666667s-426.666667-191.018667-426.666667-426.666667c0-221.226667 168.405333-403.157333 384-424.533333V85.333333H384a42.666667 42.666667 0 1 1 0-85.333333h256z m-128 234.666667a341.333333 341.333333 0 1 0 0 682.666666 341.333333 341.333333 0 0 0 0-682.666666z" p-id="11399"></path><path d="M469.333333 640m0-42.666667l0-170.666666q0-42.666667 42.666667-42.666667l0 0q42.666667 0 42.666667 42.666667l0 170.666666q0 42.666667-42.666667 42.666667l0 0q-42.666667 0-42.666667-42.666667Z" p-id="11400"></path><path d="M469.333333 554.666667m42.666667 0l170.666667 0q42.666667 0 42.666666 42.666666l0 0q0 42.666667-42.666666 42.666667l-170.666667 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666666Z" p-id="11401"></path></svg>
              <span>定时关闭</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu7">
            <div class="left">
              <svg t="1638259329972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11613" width="200" height="200"><path d="M1009.0496 343.4496L774.3488 63.8976a63.8976 63.8976 0 0 0-90.112-7.9872l-97.0752 81.92-4.096 1.4336h-142.1312l-4.096-1.4336-97.0752-81.92a63.8976 63.8976 0 0 0-90.112 7.9872L14.9504 343.4496a64.1024 64.1024 0 0 0 7.9872 90.112l131.4816 110.1824a15.9744 15.9744 0 0 1 5.7344 12.288V901.12a81.92 81.92 0 0 0 81.92 81.92h540.0576a81.92 81.92 0 0 0 81.92-81.92V556.032a15.9744 15.9744 0 0 1 5.7344-12.288l131.4816-110.1824a64.1024 64.1024 0 0 0 7.7824-90.112zM782.1312 931.84H241.8688a31.1296 31.1296 0 0 1-30.72-30.72v-130.4576h601.7024V901.12a31.1296 31.1296 0 0 1-30.72 30.72z m186.1632-537.3952l-131.4816 110.1824a66.9696 66.9696 0 0 0-23.9616 51.4048v163.84H211.1488v-163.84a66.9696 66.9696 0 0 0-23.9616-51.4048l-131.4816-110.1824a12.9024 12.9024 0 0 1-1.6384-18.0224L288.768 96.6656a12.6976 12.6976 0 0 1 18.432-1.4336l97.0752 81.92 6.9632 5.7344 8.3968 3.072h4.096l8.3968 3.072h159.9488l8.3968-3.072h4.096l8.3968-3.072 6.9632-5.7344 97.0752-81.92a12.6976 12.6976 0 0 1 18.0224 1.6384l234.7008 279.552a12.9024 12.9024 0 0 1-1.4336 18.0224z" p-id="11614"></path></svg>
              <span>个性装扮</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu8">
            <div class="left">
              <svg t="1638259445777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11893" width="200" height="200"><path d="M830.24 927.11c-16.57 0-30-13.43-30-30V445.13c0-158.94-129.3-288.24-288.24-288.24s-288.24 129.3-288.24 288.24V897.1c0 16.57-13.43 30-30 30s-30-13.43-30-30V445.13c0-47 9.21-92.61 27.38-135.56 17.54-41.47 42.65-78.71 74.62-110.68s69.21-57.08 110.68-74.62C419.39 106.1 465 96.89 512 96.89s92.61 9.21 135.56 27.38c41.47 17.54 78.71 42.65 110.68 74.62 31.97 31.97 57.08 69.21 74.62 110.68 18.17 42.95 27.38 88.56 27.38 135.56V897.1c0 16.58-13.43 30.01-30 30.01z" fill="#352E70" p-id="11894"></path><path d="M193.76 927.11c-68.39 0-124.03-55.64-124.03-124.03V638.97c0-68.39 55.64-124.03 124.03-124.03 16.57 0 30 13.43 30 30v352.17c0 7.96-3.16 15.59-8.79 21.21s-13.25 8.79-21.21 8.79z m-30-344.7c-20.23 10.77-34.03 32.08-34.03 56.56v164.11c0 24.47 13.8 45.79 34.03 56.56V582.41zM830.24 927.11c-16.57 0-30-13.43-30-30V544.93c0-16.57 13.43-30 30-30 68.39 0 124.03 55.64 124.03 124.03v164.11c0 68.4-55.64 124.04-124.03 124.04z m30-344.7v277.23c20.23-10.77 34.03-32.09 34.03-56.56V638.97c0-24.48-13.8-45.79-34.03-56.56z" fill="#352E70" p-id="11895"></path><path d="M455.69 814.11c-53.8 0-97.57-43.77-97.57-97.57 0-53.8 43.77-97.57 97.57-97.57s97.57 43.77 97.57 97.57c0 53.8-43.77 97.57-97.57 97.57z m0-135.13c-20.71 0-37.57 16.85-37.57 37.57s16.85 37.57 37.57 37.57 37.57-16.85 37.57-37.57-16.85-37.57-37.57-37.57z" fill="#FFC061" p-id="11896"></path><path d="M523.26 746.54c-16.57 0-30-13.43-30-30V449.3c0-10.99 6.01-21.1 15.66-26.35a29.975 29.975 0 0 1 30.63 1.17l112.61 72.87c13.91 9 17.89 27.57 8.89 41.48-9 13.91-27.57 17.89-41.49 8.89l-66.31-42.91v212.09c0.01 16.57-13.42 30-29.99 30z" fill="#FFC061" p-id="11897"></path></svg>
              <span>边听边存</span>
            </div>
            <div class="right">
              <span>未开启</span>
              <van-icon name="arrow" />
            </div>
          </div>

          <div class="info-menu9">
            <div class="left">
              <svg t="1638259723727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12072" width="200" height="200"><path d="M943.157895 0H80.842105A80.842105 80.842105 0 0 0 0 80.842105v862.31579a80.842105 80.842105 0 0 0 80.842105 80.842105h862.31579a80.842105 80.842105 0 0 0 80.842105-80.842105V80.842105A80.842105 80.842105 0 0 0 943.157895 0zM269.473684 741.052632h-80.842105V569.3106H269.473684z m188.631579 0h-80.842105V473.818236h80.842105z m188.631579 0h-80.842105V378.376476h80.842105z m188.631579 0h-80.842105v-458.105264h80.842105z" p-id="12073"></path></svg>
              <span>在线听歌免流量</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>

          <div class="info-menu10">
            <div class="left">
              <svg t="1638259854765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12885" width="200" height="200"><path d="M512.07 114.88c53.16 0 104.72 10.41 153.23 30.93 46.88 19.83 88.98 48.22 125.15 84.38 36.17 36.17 64.56 78.27 84.38 125.15 20.52 48.52 30.93 100.07 30.93 153.23s-10.4 104.72-30.93 153.23c-19.83 46.88-48.22 88.98-84.38 125.15-36.17 36.17-78.27 64.56-125.15 84.38-48.52 20.52-100.07 30.93-153.23 30.93s-104.72-10.4-153.23-30.93c-46.88-19.83-88.98-48.22-125.15-84.38-36.17-36.17-64.56-78.27-84.38-125.15-20.52-48.52-30.93-100.07-30.93-153.23s10.4-104.72 30.93-153.23c19.83-46.88 48.22-88.98 84.38-125.15 36.17-36.17 78.27-64.56 125.15-84.38 48.51-20.52 100.07-30.93 153.23-30.93m0-30c-234 0-423.69 189.69-423.69 423.69s189.69 423.69 423.69 423.69 423.69-189.69 423.69-423.69S746.07 84.88 512.07 84.88z" fill="#231815" p-id="12886"></path><path d="M798 816.31c-3.84 0-7.68-1.46-10.61-4.39L208.62 233.15c-5.86-5.86-5.86-15.35 0-21.21 5.86-5.86 15.36-5.86 21.21 0L808.61 790.7c5.86 5.86 5.86 15.36 0 21.21-2.93 2.93-6.77 4.4-10.61 4.4z" fill="#231815" p-id="12887"></path></svg>
              <span>音乐黑名单</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>

          <div class="info-menu11">
            <div class="left">
              <svg t="1638260001874" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13713" width="200" height="200"><path d="M867.584 160.192c-149.632-16.928-262.208-57.408-334.592-120.352l-19.04-16.544-20.544 14.656C379.968 118.944 267.776 160 160 160H128v448c0 137.344 121.088 261.92 370.208 380.864l13.088 6.24 13.344-5.728C771.072 883.52 896 755.232 896 608V163.424l-28.416-3.232zM832 608c0 116.8-107.392 223.36-319.328 316.8C299.872 821.024 192 714.464 192 608V222.976c104.672-6.784 211.584-46.688 318.496-118.944C587.232 162.528 695.168 201.536 832 220.256V608z" p-id="13714"></path><path d="M359.776 468.672a32 32 0 1 0-47.968 42.4l121.792 137.824c12.608 14.24 30.176 21.568 47.904 21.568a64.384 64.384 0 0 0 49.696-23.52l197.6-242.72a32 32 0 0 0-49.632-40.416l-197.6 242.688-121.792-137.824z" p-id="13715"></path></svg>
              <span>青少年模式</span>
            </div>
            <div class="right">
              <span>未启用</span>
              <van-icon name="arrow" />
            </div>
          </div>

          <div class="info-menu12">
            <div class="left">
              <svg t="1638260100627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14673" width="200" height="200"><path d="M507.773234 566.661947c-18.053168 0-32.661887-14.638395-32.661887-32.661887 0-18.052145 14.608719-32.659841 32.661887-32.659841 60.217477 0 120.43393 0 180.590008 0 18.052145 0 32.661887 14.607696 32.661887 32.659841 0 18.023492-14.609743 32.661887-32.661887 32.661887C628.207164 566.661947 567.99071 566.661947 507.773234 566.661947zM477.12112 376.50198c0-18.018376 14.640442-32.660864 32.692586-32.660864 17.987676 0 32.659841 14.642488 32.659841 32.660864L542.473547 533.237697c0 18.052145-14.672164 32.659841-32.659841 32.659841-18.052145 0-32.692586-15.117302-32.692586-33.171494L477.12112 376.50198zM509.813706 109.413945c117.120464 0 223.266993 47.555086 300.06817 124.360356l0.127913 0c76.806293 76.801177 124.32761 182.981475 124.32761 300.225759 0 117.121488-47.521317 223.268016-124.32761 300.069193l-0.127913 0.127913c-76.8022 76.806293-182.947705 124.391055-300.06817 124.391055-117.246331 0-223.423559-47.52234-300.260551-124.391055l0-0.127913C132.749932 757.268076 85.194846 651.121548 85.194846 534.00006c0-117.244284 47.555086-223.424582 124.358309-300.225759C286.390147 156.939355 392.567375 109.413945 509.813706 109.413945L509.813706 109.413945zM763.891426 279.893688c-65.001433-64.967664-154.884556-105.159038-254.077719-105.159038-99.224886 0-189.073216 40.220027-254.076696 105.22146-65.001433 64.97278-105.22146 154.822135-105.22146 254.04395 0 99.258655 40.220027 189.076286 105.156992 254.077719l0.064468-0.061398c65.00348 65.001433 154.850787 105.251136 254.076696 105.251136 99.193163 0 189.076286-40.249703 254.077719-105.189737 64.937988-65.001433 105.124246-154.819065 105.124246-254.077719 0-99.221816-40.186258-189.07117-105.188714-254.04395L763.891426 279.893688zM228.404502 70.533426c13.999852-11.351536 34.541701-9.214872 45.929052 4.783956 11.352559 13.973246 9.249665 34.576493-4.753257 45.961798L142.860197 224.206388c-14.000875 11.384281-34.57547 9.248641-45.959751-4.754281-11.355629-14.002922-8.835226-34.892695 5.16565-46.278L228.404502 70.533426zM791.191188 70.533426c-14.030551-11.351536-34.574447-9.214872-45.929052 4.783956-11.418051 13.973246-9.249665 34.576493 4.722558 45.961798l126.749776 102.927207c13.96813 11.384281 34.576493 9.248641 45.929052-4.754281 11.354606-14.002922 8.865925-34.892695-5.166673-46.278L791.191188 70.533426z" p-id="14674"></path></svg>
              <span>音乐闹钟</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>

        </div>

        <div class="user-list-menu info-menu">
          <div class="info-menu4">
            <div class="left">
              <svg t="1638260309520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15485" width="200" height="200"><path d="M860 323.1v-2.6l-0.7-1-0.2-1.1-0.4-0.4c-0.5-1.4-1.1-2.8-1.9-4.2-0.3-0.5-0.5-1-0.8-1.4l-0.1-0.2c-0.5-0.8-1-1.6-1.5-2.3v-0.8L610.6 77.4v-0.9l-4.1-3-1.1-1.1-0.4-0.4-1.3-1.3h-0.7c-0.9-0.6-1.8-1.1-2.7-1.7-0.5-0.3-1.1-0.6-1.8-0.9-2.6-1.2-5-2-7.6-2.5l-0.8-0.2h-0.7c-1.7-0.3-3.3-0.4-4.9-0.4H234c-38.9 0-70.5 30.4-70.5 67.8V891c0 37.4 31.6 67.9 70.5 67.9h556c38.9 0 70.5-30.4 70.5-67.9V327.9c-0.1-1.6-0.2-3.2-0.5-4.8zM616.7 170.5l132.9 126.3H616.7V170.5z m179.5 720.6c0 3-2.8 5.4-6.2 5.4H234c-3.4 0-6.2-2.4-6.2-5.4V132.9c0-3 2.8-5.4 6.2-5.4h318.4V328c0 17.2 14.4 31.2 32.1 31.2h211.7v531.9z" fill="" p-id="15486"></path><path d="M686.4 697.5H337.6c-17.1 0-31.1 14.4-31.1 32.1 0 17.7 13.9 32.1 31.1 32.1h348.9c17.1 0 31.1-14.4 31.1-32.1-0.1-17.7-14-32.1-31.2-32.1zM686.4 563.2H337.6c-17.1 0-31.1 14.4-31.1 32.1 0 17.7 13.9 32.1 31.1 32.1h348.9c17.1 0 31.1-14.4 31.1-32.1-0.1-17.7-14-32.1-31.2-32.1zM306.5 461c0 17.7 13.9 32.1 31.1 32.1h348.9c17.1 0 31.1-14.4 31.1-32.1 0-17.7-14-32.1-31.1-32.1H337.6c-17.2 0-31.1 14.4-31.1 32.1z" fill="" p-id="15487"></path></svg>
              <span>我的订单</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu5">
            <div class="left">
              <svg t="1638260338477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16300" width="200" height="200"><path d="M616.853333 90.517333a42.666667 42.666667 0 0 0-60.309333-0.042666L90.453333 556.544a42.752 42.752 0 0 0 0.042667 60.309333l58.858667 58.837334a149.333333 149.333333 0 0 1 198.933333 198.933333l58.837333 58.858667a42.666667 42.666667 0 0 0 60.309334 0.042666L933.546667 467.456a42.752 42.752 0 0 0-0.042667-60.309333l-45.013333-45.013334a149.333333 149.333333 0 0 1-205.290667-205.290666l-66.346667-66.325334zM963.626667 376.981333a85.418667 85.418667 0 0 1 0.042666 120.661334L497.642667 963.690667a85.333333 85.333333 0 0 1-120.661334-0.042667l-83.072-83.072a106.666667 106.666667 0 0 0-150.464-150.464l-83.093333-83.093333a85.418667 85.418667 0 0 1-0.042667-120.661334L526.357333 60.309333a85.333333 85.333333 0 0 1 120.661334 0.042667l93.738666 93.738667a106.666667 106.666667 0 1 0 150.464 150.464l72.426667 72.426666z m-435.050667-29.397333l-181.013333 181.013333a21.333333 21.333333 0 0 0 30.165333 30.165334l181.013333-181.013334a21.333333 21.333333 0 0 0-30.165333-30.165333z m117.653333 128l-170.666666 170.666667a21.333333 21.333333 0 0 0 30.165333 30.165333l170.666667-170.666667a21.333333 21.333333 0 0 0-30.165334-30.165333z" fill="#3D3D3D" p-id="16301"></path></svg>
              <span>优惠券</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu6">
            <div class="left">
              <svg t="1638260383128" class="icon" viewBox="0 0 1051 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17120" width="200" height="200"><path d="M55.351351 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0z m763.101406 211.552865A137.852541 137.852541 0 0 1 774.918919 664.326919v-110.924108A138.378378 138.378378 0 0 1 912.328649 415.135135C898.131027 214.071351 730.499459 55.351351 525.837838 55.351351 321.148541 55.351351 153.544649 214.071351 139.347027 415.135135A138.461405 138.461405 0 0 1 276.756757 553.402811v110.924108a138.378378 138.378378 0 0 1-276.756757 0v-110.924108a138.378378 138.378378 0 0 1 83.303784-126.865297C91.883243 189.523027 286.72 0 525.837838 0s433.954595 189.523027 442.534054 426.537514A138.461405 138.461405 0 0 1 1051.675676 553.402811v110.924108a138.378378 138.378378 0 0 1-184.790487 130.269405 470.763243 470.763243 0 0 1-188.858811 121.21946A96.809514 96.809514 0 0 1 580.912432 1010.162162h-82.528864c-53.690811 0-97.113946-43.174054-97.113946-96.864865 0-53.607784 43.284757-96.864865 97.141621-96.864865h82.473514c34.954378 0 65.536 18.265946 82.639567 45.803244a415.273514 415.273514 0 0 0 154.900757-97.28zM830.27027 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0zM498.438919 954.810811h82.473513c23.302919 0 41.79027-18.487351 41.790271-41.513514 0-23.053838-18.570378-41.513514-41.790271-41.513513h-82.473513c-23.302919 0-41.79027 18.487351-41.79027 41.513513 0 23.053838 18.570378 41.513514 41.79027 41.513514z" p-id="17121"></path></svg>
              <span>我的客服</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu7">
            <div class="left">
              <svg t="1638260432103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17919" width="200" height="200"><path d="M512 939.804444c-57.612929 0-113.570909-11.274343-166.322424-33.616161-50.889697-21.514343-96.504242-52.337778-135.809293-91.539394C170.666667 775.447273 139.843232 729.729293 118.328889 678.839596 96.193939 626.191515 84.816162 570.233535 84.816162 512.620606s11.274343-113.570909 33.616161-166.322424c21.514343-50.889697 52.337778-96.504242 91.539394-135.809293 39.201616-39.201616 84.919596-70.025051 135.809293-91.539394 52.648081-22.238384 108.606061-33.616162 166.322424-33.616162h1.034344l-0.103435 57.923233h-0.930909c-98.676364 0-191.353535 38.374141-261.068282 108.192323-69.818182 69.818182-108.295758 162.495354-108.295758 261.171717s38.374141 191.353535 108.192323 261.068283c69.714747 69.818182 162.495354 108.192323 261.068283 108.192323 98.572929 0 191.250101-38.374141 261.068283-108.088889C842.78303 704.077576 881.260606 611.400404 881.260606 512.827475h57.923232c0 57.612929-11.377778 113.570909-33.616161 166.21899-21.514343 50.889697-52.337778 96.504242-91.539394 135.705858s-84.919596 69.921616-135.705859 91.43596c-52.751515 22.341818-108.606061 33.616162-166.322424 33.616161zM938.149495 352.711111h-57.923232V145.73899H672.530101v-57.923232H938.149495V352.711111z m0 0" p-id="17920"></path><path d="M888.371717 96.012929l40.96 40.96L560.484848 505.806869l-40.96-40.96L888.371717 96.012929z m0 0" p-id="17921"></path></svg>
              <span>分享网易云音乐</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="info-menu8">
            <div class="left">
              <svg t="1638260521772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18878" width="200" height="200"><path d="M512 465.454545c-12.846545 0-23.272727 10.426182-23.272727 23.272727l0 279.272727c0 12.846545 10.426182 23.272727 23.272727 23.272727 12.846545 0 23.272727-10.426182 23.272727-23.272727l0-279.272727C535.272727 475.880727 524.846545 465.454545 512 465.454545zM512 69.818182c-257.070545 0-465.454545 208.384-465.454545 465.454545 0 257.070545 208.384 465.454545 465.454545 465.454545 257.070545 0 465.454545-208.384 465.454545-465.454545C977.454545 278.202182 769.070545 69.818182 512 69.818182zM512 954.181818c-231.377455 0-418.909091-187.531636-418.909091-418.909091 0-231.377455 187.531636-418.909091 418.909091-418.909091s418.909091 187.531636 418.909091 418.909091C930.909091 766.650182 743.377455 954.181818 512 954.181818zM512 279.272727c-25.693091 0-46.545455 20.852364-46.545455 46.545455s20.852364 46.545455 46.545455 46.545455 46.545455-20.852364 46.545455-46.545455S537.693091 279.272727 512 279.272727z" p-id="18879"></path></svg>
              <span>关于</span>
            </div>
            <div class="right">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>

        <div class="userInfo-btn" style="text-align:center;color:red;font-size:14px;" @click="loginOut">
          <span>退出登录/关闭</span>
        </div>
      </div>

    </van-popup>

    <van-popup v-model="isshow" round position="bottom" :style="{ height: '20%' }">
      <div class="ltitle" style="font-size:10px;color:#ccc;padding:20px;border-bottom:1px solid #ccc">
        <span>退出登录/关闭</span>
      </div>
      <div class="music-close" style="font-size:12px;padding:10px;padding-left:20px;" @click="closeBtn">
        <span>关闭云音乐</span>
      </div>
      <div class="music-signOut" style="font-size:12px;padding:10px;padding-left:20px;" @click="signOut">
        <span>退出云音乐登录</span>
      </div>
    </van-popup>
  </div>
</template>

<script>

import { Toast,Dialog } from 'vant';
import { getLoginOut } from '../../api/login'
import { getSearchTxt } from '../../api/search'

export default{
  data() {
    return {
      show:false,
      userName:'',
      value:'',
      imageUrl:'',
      checked: false,
      isshow:false,
      placeholderTxt:'请输入搜索关键词',
    }
  },
  
  created(){
    this._getSearchTxt();
    if(this.$session.getItem('profile') != null){
      this.imageUrl = this.$session.getItem('profile').avatarUrl;
      this.userName = this.$session.getItem('profile').nickname;
    }
  },

  methods:{
    _getSearchTxt(){
      getSearchTxt().then((res) => {
        // console.log(res);
        this.placeholderTxt = res.data.showKeyword;
      })
    },

    showUserList(){
      this.show = true;
    },

    loginOut(){
      this.isshow = true;
    },

    closeBtn(){
      console.log('111');
    },

    signOut(){
      Dialog.confirm({
        message: '确定退出当前账号吗？',
      }).then(() => {
        getLoginOut().then((res) => {
          console.log(res);
          this.$session.clear();
          this.$router.push('/');
          Toast.success('成功退出！');
        })
      }).catch((error) => {
          // on cancel
          console.log(error);
      });
      
    },

    searchClick(){
      console.log('111');
      this.$router.push('/search');
    },
  }
}
</script>


<style>
.header{
  background: rgba(225, 225, 225,0.4);
  width: 100%;
  height: 55px;
  z-index: 100;
  display: flex;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  /* z-index: 999; */
}

.header > .user-icon{
  margin-left: 10px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: rgba(150, 150, 150, 1);
}

.right-icon{
  margin-right: 10px;
}

.van-popup{
  background-color: #f7f1f1;
}

.userInfo{
  /* position: fixed; */
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.userInfo .left img{
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.left{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.left img{
  padding-right: 5px;
}

.left svg{
  padding-right: 5px;
}

.right{
  color: #ccc;
  font-size: 12px;
}

.user-list-menu,
.userInfo-btn{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
}

.info-menu1,
.info-menu2,
.info-menu3{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.info-menu4,
.info-menu5,
.info-menu6,
.info-menu7,
.info-menu8,
.info-menu9,
.info-menu10,
.info-menu11,
.info-menu12{
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.music-close:hover{
  background: #ccc;
}
.music-signOut:hover{
  background: #ccc;
}
</style>
